<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3滤镜</title>
        <style>
            .blur img:nth-of-type(2) {
                filter: blur(2px);
            }
            .blur img:last-of-type {
                filter: blur(10px);
            }

            .brightness img:nth-of-type(2) {
                filter: brightness(50%);
            }
            .brightness img:last-of-type {
                filter: brightness(200%);
            }

            .contrast img:nth-of-type(2) {
                filter: contrast(50%);
            }
            .contrast img:last-of-type {
                filter: contrast(200%);
            }

            .grayscale img:nth-of-type(2) {
                filter: grayscale(30%);
            }
            .grayscale img:last-of-type {
                filter: grayscale(100%);
            }

            .hue-rotate img:nth-of-type(2) {
                filter: hue-rotate(120deg);
            }
            .hue-rotate img:last-of-type {
                filter: hue-rotate(360deg);
            }

            .invert img:nth-of-type(2) {
                filter: invert(50%);
            }
            .invert img:last-of-type {
                filter: invert(100%);
            }

            .saturate img:nth-of-type(2) {
                filter: saturate(50%);
            }
            .saturate img:last-of-type {
                filter: saturate(300%);
            }

            .sepia img:nth-of-type(2) {
                filter: sepia(50%);
            }
            .sepia img:last-of-type {
                filter: sepia(100%);
            }

            .multi-filter img:nth-of-type(2) {
                filter: sepia(50%) blur(2px);
            }
            .multi-filter img:last-of-type {
                filter: hue-rotate(90deg) grayscale(60%) ;
            }
        </style>
    </head>
    <body>
        <div class="blur">
            <h2>模糊</h2>
            <p>blur(px)函数接受具体像素值，默认为0表示不模糊，参数越大，效果越模糊</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="brightness">
            <h2>亮度</h2>
            <p>brightness(%)函数接受百分比值，默认为100%表示原图亮度；参数越大图片越亮；参数越小图片越暗，0%会让图片变成全黑的</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="contrast">
            <h2>对比度</h2>
             <p>contrast(%)函数接受百分比值，默认为100%表示原图对比度；参数越大图片对比度越强；参数越小图片对比度越弱，0%会让图片变成全黑的</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="grayscale">
            <h2>灰度</h2>
             <p>grayscale(%)函数接受百分比值，默认为0%表示原图灰度；100%会让图片变成黑白照片，参数不允许为负值</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="hue-rotate">
            <h2>色调旋转</h2>
             <phue-rotate滤镜可以理解为“色相旋转”，用来改变图片的色相；hue-rotate(deg) 函数接受一个角度值为参数，表示图片色调在色环上旋转的角度；参数默认值是0度，表示保持原图不变；该函数的参数最大值是360度。</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="invert">
            <h2>反色</h2>
             <p>invert滤镜作用是反转图片颜色（反色），invert(%) 函数接受百分比为参数，默认值是0%表示保持原图不变，100%表示图片颜色完全反转。</p>
             <p>invert(%) 函数不接受负值为参数</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="saturate">
            <h2>饱和度</h2>
             <p>saturate滤镜用来改变图片的饱和度，saturate(%) 函数接受百分比为参数，0%（0）会使图片完全不饱和，默认值为100%（1），表示保持原图饱和度不变，超过100%的参数会使图片更加饱和。</p>
             <p>`saturate(%) 函数不接受负值为参数</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="sepia">
            <h2>老照片</h2>
             <p>sepia滤镜用来实现图片的“老照片”效果，`sepia(%)` 函数也接受百分比为参数，默认值为0%表示保持原图不变，100%会使图片完全“老照片化”。</p>
             <p>`sepia(%) 函数不接受负值为参数</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
        <div class="multi-filter">
            <h2>多滤镜效果</h2>
             <p>sepia滤镜用来实现图片的“老照片”效果，`sepia(%)` 函数也接受百分比为参数，默认值为0%表示保持原图不变，100%会使图片完全“老照片化”。</p>
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
            <img src="building.jpg" alt="原图">
        </div>
    </body>
</html>